<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华米账号-注册</title>
    <link rel="stylesheet" href="../css/pc-ggys.css">
    <link rel="stylesheet" href="../css/reg.css">
</head>

<body>
    <div class="b_top">
        <div class="top">
            <div><img src="https://id1.cloud.huawei.com/CAS/static_rss/rss_92/IDMW/common/logos/HUAWEI.svg" alt="">
            </div>
            <div class="mc"><span style="margin: 8px;">丨</span><span>华为商城</span></div>
        </div>
    </div>
    <div class="b_box">
        <div class="box">
            <div class="title">华为账号注册</div>
            <div class="qdl">已有账号，<a href="./01login.html">去登录</a></div>
            <form action="">
                <div>
                    <span class="userts">请输入6-12位，数字或者字母组成，且数字不能开头</span>
                    <input type="text" class="user" placeholder="请设置账号">

                </div>
                <div>
                    <span class="pwdts">请输入6-12位的密码，建议使用字母大小写及数字组合</span>
                    <input type="password" class="pwd" placeholder="请设置密码">

                </div>
                <div>
                    <span class="sjhts">请输入手机号</span>
                    <input type="text" class="sjh" placeholder="请设置手机号">

                </div>
                <div>
                    <span class="yxts">请输入邮箱</span>
                    <input type="email" class="yx" placeholder="请设置邮箱地址">

                </div>
                <div>
                    <span id="yzmsrts">验证码不分大小写</span>
                    <input id="yzmsr" type="text" placeholder="请输入验证码">
                    <input id="code" type="text" disabled>
                    <p id="yzm">刷新</p>
                </div>
            </form>

            <button class="btn">注册</button>

        </div>
    </div>

    <div class="foot">
        <div class="foot_s">
            <span><a href="">华为帐号用户协议</a></span>
            <span>丨</span>
            <span><a href="">关于华为帐号与隐私的声明</a></span>
            <span>丨</span>
            <span><a href="">常见问题</a> </span>
            <span>丨</span>
            <span><a href="">Cookies</a></span>
            <br>
        </div>
        <div class="foot_x">
            <p>华为帐号 版权所有 © 2011-2022</p>
        </div>
    </div>

    <script src="../js/promise_ajax.js"></script>
    <script src="../js/api.js"></script>
    <script src="../js/yzm.js"></script>
    <script>
        //注册按钮
        const oBtn = document.querySelector('.btn');
        // console.log(oBtn);
        //用户名
        const oUser = document.querySelector('.user');
        // console.log(oUser);
        //用户名提示
        const oUserts = document.querySelector('.userts');
        // console.log(oUserts);
        //密码
        const oPwd = document.querySelector('.pwd');
        //密码提示
        const oPwdts = document.querySelector('.pwdts');
        // console.log(oPwd, oPwdts);
        //手机号
        const oSjh = document.querySelector('.sjh');
        //手机号提示
        const oSjhts = document.querySelector('.sjhts');
        // console.log(oSjh, oSjhts);
        //邮箱号
        const oYx = document.querySelector('.yx');
        //邮箱号提示
        const oYxts = document.querySelector('.yxts');
        // console.log(oYx, oYxts);
        //获取验证码输入
        var oYzmsr = document.getElementById('yzmsr');
        //获取刷新按钮
        var oCode = document.getElementById('code');
        //获取验证码
        var oYzm = document.getElementById('yzm');
        //获取验证码提示
        var oYzmsrts = document.getElementById('yzmsrts');

        //要注册 先满足五个条件
        var tj1 = 0;
        var tj2 = 0;
        var tj3 = 0;
        var tj4 = 0;
        var tj5 = 0;


        // console.log(tj1, tj2);



        //打开页面就要有验证码
        oCode.value = code(5);
        //绑定刷新验证码事件
        oYzm.onclick = function () {
            oCode.value = code(5);
            // 1.先去验证码的前后空格
            var uyzm = oYzmsr.value.trim();
            // 2.验证验证码为空否
            if (/^.{0}$/.test(uyzm)) {
                oYzmsrts.innerHTML = '验证码不能为空哟！';
                oYzmsrts.style.color = 'red';
            }
            else if (uyzm.toLowerCase() !== oCode.value.toLowerCase()) {
                oYzmsrts.innerHTML = '验证码错误';
                oYzmsrts.style.color = 'red';
                oBtn.style.cssText += "background:rgba(202,20,29,.5);cursor:not-allowed;"
                oBtn.disabled = true;

            }
            else {
                oYzmsrts.innerHTML = '验证码正确';
                oYzmsrts.style.color = 'green';
            }
        }

        //用户名边输入边判断
        oUser.oninput = function () {
            // 1.去掉前后空格
            var usyhm = oUser.value.trim();
            // 2.验证为空否
            if (/^.{0}$/.test(usyhm)) {
                oUserts.innerHTML = '输入不能为空哟！';
                oUserts.style.color = 'red';
                tj1 = 0;
                //条件为5按钮高亮
                if (tj1 + tj2 + tj3 + tj4 + tj5 == 5) {
                    oBtn.style.cssText += "background:#ca141d;cursor:pointer;"
                    oBtn.disabled = false;
                }
                else {
                    oBtn.style.cssText += "background:rgba(202,20,29,.5);cursor:not-allowed;"
                    oBtn.disabled = true;
                }
            }
            // 3.验证长度 
            else if (/^.{0,5}$/.test(usyhm) || /^.{13,}$/.test(usyhm)) {
                oUserts.innerHTML = '请输入正确长度，至少6位至多12位';
                oUserts.style.color = 'red';
                tj1 = 0;
                //条件为5按钮高亮
                if (tj1 + tj2 + tj3 + tj4 + tj5 == 5) {
                    oBtn.style.cssText += "background:#ca141d;cursor:pointer;"
                    oBtn.disabled = false;
                }
                else {
                    oBtn.style.cssText += "background:rgba(202,20,29,.5);cursor:not-allowed;"
                    oBtn.disabled = true;
                }
            }
            // 4.验证数字开头
            else if (/\d/.test(usyhm[0])) {
                oUserts.innerHTML = '数字不能开头哟！';
                oUserts.style.color = 'red';
                tj1 = 0;
                //条件为5按钮高亮
                if (tj1 + tj2 + tj3 + tj4 + tj5 == 5) {
                    oBtn.style.cssText += "background:#ca141d;cursor:pointer;"
                    oBtn.disabled = false;
                }
                else {
                    oBtn.style.cssText += "background:rgba(202,20,29,.5);cursor:not-allowed;"
                    oBtn.disabled = true;
                }
            }
            // 5.验证非法 
            else if (/\W/.test(usyhm)) {
                oUserts.innerHTML = '只能包含数字字母和下划线';
                oUserts.style.color = 'red';
                tj1 = 0;
                //条件为5按钮高亮
                if (tj1 + tj2 + tj3 + tj4 + tj5 == 5) {
                    oBtn.style.cssText += "background:#ca141d;cursor:pointer;"
                    oBtn.disabled = false;
                }
                else {
                    oBtn.style.cssText += "background:rgba(202,20,29,.5);cursor:not-allowed;"
                    oBtn.disabled = true;
                }
            }
            //6. 输入正确
            else {
                oUserts.innerHTML = '用户名验证成功√';
                oUserts.style.color = 'green';
                tj1 = 1;
                console.log(tj1);
                //条件为5按钮高亮
                if (tj1 + tj2 + tj3 + tj4 + tj5 == 5) {
                    oBtn.style.cssText += "background:#ca141d;cursor:pointer;"
                    oBtn.disabled = false;
                }
                else {
                    oBtn.style.cssText += "background:rgba(202,20,29,.5);cursor:not-allowed;"
                    oBtn.disabled = true;
                }
            }

            //都有值注册按钮才高亮
            // if (oUser.value && oPwd.value && oSjh.value && oYx.value && oYzmsr.value) {
            //     oBtn.style.cssText += "background:#ca141d;cursor:pointer;"
            //     oBtn.disabled = false;
            // }
            // else {
            //     oBtn.style.cssText += "background:rgba(202,20,29,.5);cursor:not-allowed;"
            //     oBtn.disabled = true;
            // }
        }


        //密码边输入边判断
        oPwd.oninput = function () {
            // 1.先去掉密码框的前后空格
            var usmm = oPwd.value.trim();
            // 2.验证为空否
            if (/^.{0}$/.test(usmm)) {
                oPwdts.innerHTML = '输入不能为空哟！';
                oPwdts.style.color = 'red';
                tj2 = 0;
                //条件为5按钮高亮
                if (tj1 + tj2 + tj3 + tj4 + tj5 == 5) {
                    oBtn.style.cssText += "background:#ca141d;cursor:pointer;"
                    oBtn.disabled = false;
                }
                else {
                    oBtn.style.cssText += "background:rgba(202,20,29,.5);cursor:not-allowed;"
                    oBtn.disabled = true;
                }
            }
            // 3.验证密码长度 
            else if (/^.{0,5}$/.test(usmm) || /^.{13,}$/.test(usmm)) {
                oPwdts.innerHTML = '密码至少6位，至多12位哟！';
                oPwdts.style.color = 'red';
                tj2 = 0;
                //条件为5按钮高亮
                if (tj1 + tj2 + tj3 + tj4 + tj5 == 5) {
                    oBtn.style.cssText += "background:#ca141d;cursor:pointer;"
                    oBtn.disabled = false;
                }
                else {
                    oBtn.style.cssText += "background:rgba(202,20,29,.5);cursor:not-allowed;"
                    oBtn.disabled = true;
                }
            }
            // 4.验证通过 判断密码强度
            else {
                tj2 = 1;
                console.log(tj2);
                //条件为5按钮高亮
                if (tj1 + tj2 + tj3 + tj4 + tj5 == 5) {
                    oBtn.style.cssText += "background:#ca141d;cursor:pointer;"
                    oBtn.disabled = false;
                }
                else {
                    oBtn.style.cssText += "background:rgba(202,20,29,.5);cursor:not-allowed;"
                    oBtn.disabled = true;
                }
                let count = 0;
                // 判断是否有数字
                if (/\d/.test(usmm)) {
                    count++;
                }
                // 判断小写
                if (/[a-z]/.test(usmm)) {
                    count++;
                }
                // 判断大写
                if (/[A-Z]/.test(usmm)) {
                    count++;
                }
                if (count === 1) {
                    oPwdts.innerHTML = '密码通过 强度一级';
                    oPwdts.style.color = 'orangered';

                }
                else if (count === 2) {
                    oPwdts.innerHTML = '密码通过 强度二级';
                    oPwdts.style.color = 'green';

                }
                else {
                    oPwdts.innerHTML = '密码通过 强度三级';
                    oPwdts.style.color = 'gold';
                }
            }
            //都有值注册按钮才高亮
            // if (oUser.value && oPwd.value && oSjh.value && oYx.value && oYzmsr.value) {
            //     oBtn.style.cssText += "background:#ca141d;cursor:pointer;"
            //     oBtn.disabled = false;
            // }
            // else {
            //     oBtn.style.cssText += "background:rgba(202,20,29,.5);cursor:not-allowed;"
            //     oBtn.disabled = true;
            // }
        }


        //手机号边输入边判断
        oSjh.oninput = function () {
            // 1.先去手机号框的前后空格
            var usjh = oSjh.value.trim();
            // 2.验证手机号为空否
            if (/^.{0}$/.test(usjh)) {
                oSjhts.innerHTML = '输入不能为空哟！';
                oSjhts.style.color = 'red';
                tj3 = 0;
                //条件为5按钮高亮
                if (tj1 + tj2 + tj3 + tj4 + tj5 == 5) {
                    oBtn.style.cssText += "background:#ca141d;cursor:pointer;"
                    oBtn.disabled = false;
                }
                else {
                    oBtn.style.cssText += "background:rgba(202,20,29,.5);cursor:not-allowed;"
                    oBtn.disabled = true;
                }
            }
            // 3.验证手机号合法否
            else if (/^1[3-9]\d{9}$/.test(usjh)) {
                oSjhts.innerHTML = '手机号验证成功';
                oSjhts.style.color = 'green';
                tj3 = 1;
                console.log(tj3);
                //条件为5按钮高亮
                if (tj1 + tj2 + tj3 + tj4 + tj5 == 5) {
                    oBtn.style.cssText += "background:#ca141d;cursor:pointer;"
                    oBtn.disabled = false;
                }
                else {
                    oBtn.style.cssText += "background:rgba(202,20,29,.5);cursor:not-allowed;"
                    oBtn.disabled = true;
                }
            }
            else {
                oSjhts.innerHTML = '非法手机号';
                oSjhts.style.color = 'red';
                tj3 = 0;
                //条件为5按钮高亮
                if (tj1 + tj2 + tj3 + tj4 + tj5 == 5) {
                    oBtn.style.cssText += "background:#ca141d;cursor:pointer;"
                    oBtn.disabled = false;
                }
                else {
                    oBtn.style.cssText += "background:rgba(202,20,29,.5);cursor:not-allowed;"
                    oBtn.disabled = true;
                }
            }
            //都有值注册按钮才高亮
            // if (oUser.value && oPwd.value && oSjh.value && oYx.value && oYzmsr.value) {
            //     oBtn.style.cssText += "background:#ca141d;cursor:pointer;"
            //     oBtn.disabled = false;
            // }
            // else {
            //     oBtn.style.cssText += "background:rgba(202,20,29,.5);cursor:not-allowed;"
            //     oBtn.disabled = true;
            // }
        }


        //邮箱边输入边判断
        oYx.oninput = function () {
            // 1.先去邮箱框的前后空格
            var uyx = oYx.value.trim();
            // 2.验证邮箱号为空否
            if (/^.{0}$/.test(uyx)) {
                oYxts.innerHTML = '输入不能为空哟！';
                oYxts.style.color = 'red';
                tj4 = 0;
                //条件为5按钮高亮
                if (tj1 + tj2 + tj3 + tj4 + tj5 == 5) {
                    oBtn.style.cssText += "background:#ca141d;cursor:pointer;"
                    oBtn.disabled = false;
                }
                else {
                    oBtn.style.cssText += "background:rgba(202,20,29,.5);cursor:not-allowed;"
                    oBtn.disabled = true;
                }
            }
            else if (/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(uyx)) {
                oYxts.innerHTML = "邮箱验证成功";
                oYxts.style.color = 'green';
                tj4 = 1;
                console.log(tj4);
                //条件为5按钮高亮
                if (tj1 + tj2 + tj3 + tj4 + tj5 == 5) {
                    oBtn.style.cssText += "background:#ca141d;cursor:pointer;"
                    oBtn.disabled = false;
                }
                else {
                    oBtn.style.cssText += "background:rgba(202,20,29,.5);cursor:not-allowed;"
                    oBtn.disabled = true;
                }
            }
            else {
                oYxts.innerHTML = "邮箱地址错误";
                oYxts.style.color = 'red';
                tj4 = 0;
                //条件为5按钮高亮
                if (tj1 + tj2 + tj3 + tj4 + tj5 == 5) {
                    oBtn.style.cssText += "background:#ca141d;cursor:pointer;"
                    oBtn.disabled = false;
                }
                else {
                    oBtn.style.cssText += "background:rgba(202,20,29,.5);cursor:not-allowed;"
                    oBtn.disabled = true;
                }
            }
            //都有值注册按钮才高亮
            // if (oUser.value && oPwd.value && oSjh.value && oYx.value && oYzmsr.value) {
            //     oBtn.style.cssText += "background:#ca141d;cursor:pointer;"
            //     oBtn.disabled = false;
            // }
            // else {
            //     oBtn.style.cssText += "background:rgba(202,20,29,.5);cursor:not-allowed;"
            //     oBtn.disabled = true;
            // }
        }


        //验证码边输入边判断
        oYzmsr.oninput = function () {
            // 1.先去验证码的前后空格
            var uyzm = oYzmsr.value.trim();
            // 2.验证验证码为空否
            if (/^.{0}$/.test(uyzm)) {
                oYzmsrts.innerHTML = '验证码不能为空哟！';
                oYzmsrts.style.color = 'red';
                tj5 = 0;
                //条件为5按钮高亮
                if (tj1 + tj2 + tj3 + tj4 + tj5 == 5) {
                    oBtn.style.cssText += "background:#ca141d;cursor:pointer;"
                    oBtn.disabled = false;
                }
                else {
                    oBtn.style.cssText += "background:rgba(202,20,29,.5);cursor:not-allowed;"
                    oBtn.disabled = true;
                }
            }

            // 3.都转化为小写 然后进行比较结果
            else if (uyzm.toLowerCase() !== oCode.value.toLowerCase()) {
                oYzmsrts.innerHTML = '验证码错误';
                oYzmsrts.style.color = 'red';
                tj5 = 0;
                //条件为5按钮高亮
                if (tj1 + tj2 + tj3 + tj4 + tj5 == 5) {
                    oBtn.style.cssText += "background:#ca141d;cursor:pointer;"
                    oBtn.disabled = false;
                }
                else {
                    oBtn.style.cssText += "background:rgba(202,20,29,.5);cursor:not-allowed;"
                    oBtn.disabled = true;
                }
            }
            else {
                oYzmsrts.innerHTML = '验证码正确';
                oYzmsrts.style.color = 'green';
                tj5 = 1;
                console.log(tj5);

            }
            //都有值注册按钮才高亮
            // if (oUser.value && oPwd.value && oSjh.value && oYx.value && oYzmsr.value) {
            //     oBtn.style.cssText += "background:#ca141d;cursor:pointer;"
            //     oBtn.disabled = false;
            // }
            // else {
            //     oBtn.style.cssText += "background:rgba(202,20,29,.5);cursor:not-allowed;"
            //     oBtn.disabled = true;
            // }
            //条件为5按钮高亮
            if (tj1 + tj2 + tj3 + tj4 + tj5 == 5) {
                oBtn.style.cssText += "background:#ca141d;cursor:pointer;"
                oBtn.disabled = false;
            }
            else {
                oBtn.style.cssText += "background:rgba(202,20,29,.5);cursor:not-allowed;"
                oBtn.disabled = true;
            }

        }







        //注册按钮
        oBtn.onclick = async function () {
            const username = oUser.value;
            const userpwd = oPwd.value;
            const usersjh = oSjh.value;
            const usereml = oYx.value;


            if (username && userpwd && usersjh && usereml) {
                await reg({
                    username,
                    userpwd,
                    usersjh,
                    usereml
                }).then(data => {
                    console.log(data);
                    const { status, msg } = data;
                    if (status) {
                        alert(msg);
                        location.href = './01login.html'
                    } else {
                        alert(msg);
                    }

                })
            }
        }





    </script>

</body>

</html>